Avoid new stack context for task list items #20377
Conversation
- Avoid creating a new stack context on a task list item, this PR does that by removing the `position: relative` which causes a new stack context to be created on that element. And thereby solving that popups weren't able to utilize their z-index and weren't able to show properly.
- Backport go-gitea#20377 - Avoid creating a new stack context on a task list item, this PR does that by removing the `position: relative` which causes a new stack context to be created on that element. And thereby solving that popups weren't able to utilize their z-index and weren't able to show properly. Before:  After: 
GiteaBot
added
the
lgtm/need 1
|
Oh wait, to be more careful ..... I think this is incorrect. See the screenshot.
|
|
Thanks for testing @wxiaoguang, f15f897 fixes the issue by making the checkbox relative to the parent element. |
|
Better but there are still other cases. I think there should be more comments about all the cases.
|
|
The root problem is that the popups are part of the regular DOM structure where unintended interactions with stacking context happen with surrounding elements. The real fix is to "portal" out the popup to be a direct descendant of |
|
Maybe fomantic can actually do popup portalling. Worth a try adding a $el.popup({
popup: document.getElementById('popup'),
movePopup: false,
preserve: true,
}); |
We already use fomantic's popup functionality. However portalling should work by specifying |
|
Popper looks interesting, don't have any experience with it. @silverwind would you like to take over this PR(or create a new one) otherwise I can have a look into popper some time soon. |
|
are things fixed ?!? |
Adding status/wip |
|
My (draft) proposal is : https://github.com/wxiaoguang/gitea/tree/fix-stack-context (35631a7) , remove the
|
Rewrite to popper (or maybe even the newer floating-ui, but it's quite complex to implement) will be more involved. It'd be awesome if we get portalling popups to work with Fomantic, otherwise I guess a workaround like done here is borderline acceptable. |
|
#20393 is a replacement for this PR which uses portalling, so surrounding CSS won't interfere anymore with these popups. |
By appending the tooltips to document.body, we can avoid any stacking context issues caused by surrounding element's CSS. I wasn't able to get this portalling to work with Fomantic popups, so this uses tippy.js instead of Fomantic popups. We should aim to replace all Fomantic popups with this eventually. Fixes: go-gitea#20377
|
Closing as #20393 is better solution to this. |
position: relativewhich causes a new stack context to be created on that element. And thereby solving that popups weren't able to utilize their z-index and weren't able to show properly.Before:
After:
